<template>
    <div id='mineMap'>
        
    </div>
</template>

<script>
import {importMineMap} from '../utils/minemap'
import SLRoad from '../static/shilong/SLRoadUpdate'

export default {
    mounted(){
        importMineMap().then(()=>{
            minemap.accessToken = 'b46464fcb95f453fb883397e9e62d699';
            minemap.solution = 11811;
            const map = new minemap.Map({
                container:'mineMap',
                style: "//minedata.cn/service/solu/style/id/11811",
                center: [113.870836, 23.109164],
                zoom: 13,
            })
            SLRoad.forEach((_,index) => {
                if(index==0){
                    let coordList = [];
                    _.coordinates.split('|').map((item) => {
                        coordList.push(item.split(';'))
                    })
                    console.log(coordList)
                    this.link(map,coordList,index)
                }
            });
        })
    },
    methods: {
        link(map,item,index){
            let id = index.toString();
            map.addSource(id, {
                "type": "geojson",
                "data": {
                    "type": "Feature",
                    "properties": {},
                    "geometry": {
                        "type": "LineString",
                        "coordinates":item
                    }
                }
            });
            map.addLayer({
                "id": id,
                "type": "line",
                "source":id,
                "paint": {
                    "line-color": "red",
                    "line-width": 1
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
#mineMap{
    height: 100vh;
    width: 100vw;
}
</style>
